<template>
  <div class="apply">
    <nav>
      <van-row>
        <van-col span="4" @click="backFunc">&lt;</van-col>
        <van-col span="14" offset="1">申请添加朋友</van-col>
      </van-row>
    </nav>
    <form>
      <div class="message">
        <span>发送添加朋友申请</span>
        <textarea v-model="text" cols="53" rows="3"></textarea>
      </div>
      <div class="remark">
        <span>设置备注</span>
        <input type="text" v-model="val" />
      </div>
      <div class="tag">
        <span>标签</span>
        <div class="tag-list">
          <span>设置备注</span>
          <span>&gt;</span>
        </div>
      </div>
      <div class="limit">
        <span>设置朋友权限</span>
        <div class="limit-list">
          <div class="limit-item">聊天、朋友圈、微信运动等</div>
          <span>仅聊天</span>
        </div>
      </div>
      <div class="status">
        <span>朋友圈和状态</span>
        <div class="status-list">
          <div class="status-item">不让他看我</div>
          <span>不看他</span>
        </div>
      </div>
    </form>
    <van-button type="primary" class="send-btn" @click="sendToFriends"
      >发送申请</van-button
    >
  </div>
</template>

<script>
import { Toast } from "vant";
import { mapActions, mapState } from "vuex";

export default {
  data() {
    return {
      val: "",
      text: "",
      checkedOne: false,
      checkedTwo: false,
    };
  },
  created() {
    this.val = this.BasicObj.nickname || `用户${this.BasicObj.phone}`;
    this.text = this.userName || `我是用户${this.userId}`;
  },
  computed: {
    ...mapState({
      userId: (state) => state.login.userId,
      userName: (state) => state.login.nickname,
      BasicObj: (state) => state.friends.friendsBasicObj,
    }),
  },
  methods: {
    ...mapActions(["sendMsgToFriends"]),
    backFunc() {
      this.$router.go(-1);
    },
    sendToFriends() {
      console.log(this.text, this.BasicObj.phone);
      this.sendMsgToFriends({
        id: this.BasicObj.phone,
        text: this.text,
      });
      Toast.success("发送成功");
      this.$router.push({ name: "searchView" });
    
    },
  },
};
</script>

<style lang="scss" scoped>
.apply {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background-color: rgb(17, 17, 17);

  nav {
    width: 100vw;
    height: 45px;
    background-color: rgb(17, 17, 17);
    line-height: 45px;
    color: white;
    text-align: center;
    font-size: 14px;
  }

  form {
    padding: 15px;
    color: gray;
    line-height: 25px;

    .message {
      textarea {
        resize: none;
        width: 98%;
        color: white;
        outline: none;
        border: none;
        background-color: rgb(24, 24, 24);
        padding: 5px;
      }
    }
    .remark {
      input {
        width: 99%;
        height: 35px;
        margin: 0 auto;
        outline: none;
        border: none;
        background-color: rgb(24, 24, 24);
      }
    }

    .tag {
      margin: 15px 0;

      .tag-list {
        height: 35px;
        margin: 0 auto;
        color: white;
        background-color: rgb(24, 24, 24);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
      }
    }

    .limit {
      margin-bottom: 15px;

      .limit-list {
        color: white;
        padding: 0 15px;
        line-height: 40px;
        background-color: rgb(24, 24, 24);
        display: flex;
        flex-direction: column;

        .limit-item {
          border-bottom: 1px solid rgba(204, 203, 203, 0.1);
        }
      }
    }
    .status-list {
      color: white;
      padding: 0 15px;
      line-height: 40px;
      background-color: rgb(24, 24, 24);
      display: flex;
      flex-direction: column;

      .status-item {
        border-bottom: 1px solid rgba(204, 203, 203, 0.1);
      }
    }
  }
  .send-btn {
    width: 120px;
    position: absolute;
    bottom: 30px;
    left: 35%;
  }
}
</style>